<template>
  <b-card no-body>
    <b-card-header class="border-0">
      <h3 class="mb-0">校内选课</h3>
    </b-card-header>
    <div class="pl-lg-4">
      <b-row>
        <b-col lg="8">
          <el-table :data="classTable" style="width: 100%" max-height="900">
            <el-table-column prop="className" label="选课课程名称" width="200">
            </el-table-column>
            <el-table-column prop="classTime" label="课程时间" width="180">
            </el-table-column>
            <el-table-column prop="teacher" label="授课教师" width="120">
            </el-table-column>
            <el-table-column prop="address" label="授课地点" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, classTable)"
                  type="text"
                  size="medium "
                  style="font-color = red"
                >
                  添加
                </el-button>
              </template>
            </el-table-column>
          </el-table></b-col
        ><b-col lg="3">
          <el-table :data="unClassTable" style="width: 100%" max-height="900">
            <el-table-column
              fixed
              prop="unClassName"
              label="退课名称"
              width="190"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, unclassTable)"
                  type="text"
                  size="medium "
                >
                  退课
                </el-button>
              </template>
            </el-table-column>
          </el-table></b-col
        >
      </b-row>
    </div>
  </b-card>
</template>
<script>
export default {
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  data() {
    return {
      classTable: [
        {
          className: "毛泽东思想和中国特色社会主义理论体系概论I",
          classTime: "周二第1,2节{第6-17周}",
          teacher: "段意买",
          address: "B212机房",
        },
      ],
      unClassTable: [
        {
          unClassName: "毛泽东思想和中国特色社会主义理论体系概论I",
        },
      ],
    };
  },
};
</script>
